<template>
  <div class="cart">
    <van-nav-bar title="我的洗衣篮" left-text="返回" left-arrow  @click-left="onClickLeft"/>
    <div class="nogood" v-if="isEmpty">
      <van-empty description="购物车空空如也，快去购物吧" />
    </div>
    <van-checkbox-group class="card-goods" v-model="checkedGoods">
      <div v-for="(item,index) in goods"  :key="index">
      
        <van-card
          :title="item.cartGoodsName"
          :desc="item.cartGoodsDesc"
          :num="item.cartGoodsNum"
          :price="formatPrice(item.cartGoodsPrice*100)"
          :thumb="item.cartGoodsPic"
        >
        <div slot="footer" class="footer">
          <van-stepper min="1" max="999" :long-press="true" v-model="item.cartGoodsNum" 
          @change="changeNum(item.cartId,item.cartGoodsNum,item.cartGoodsName)"
          @overlimit="deleteGood(item.cartId,item.cartGoodsName,index)"
          />
        </div>
        </van-card>
      </div>
    </van-checkbox-group>
    <div class="submitbar">
      <van-submit-bar
        :price="totalPrice"
        :disabled="!goods.length"
        :button-text="submitBarText"
        @submit="onSubmit"
      >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast,Notify,Dialog} from 'vant';
export default {
  components: {
    [Card.name]: Card,
    [Checkbox.name]: Checkbox,
    [SubmitBar.name]: SubmitBar,
    [CheckboxGroup.name]: CheckboxGroup
  },

  data() {
    return {
      checkedGoods: ['1', '2', '3'],
      goods: [],
      totalMoney:'',
      isEmpty:true,
    };
  },

  created:function(){
    this.$axios
    .get("/order/cartlist")
    .then((res) => {
      if(res.data.code == 200) {
        this.isEmpty=false;
        this.goods = res.data.info;
        //console.log(this.images);
      }
    })
    .catch(error => {
      console.log("请求购物车数据失败了")
    });
  },


  computed: {
    submitBarText() {
      const count = this.goods.length;
      return '结算' + (count ? `(${count})` : '');
    },

    totalPrice() {
      var total=0;
      for(var i in this.goods){
          var money=this.goods[i].cartGoodsPrice*this.goods[i].cartGoodsNum;
          total+=money;
      }
      var a=total*100;
      this.totalMoney=a;
      return a;
    },
  },

  methods: {
    onSubmit() {
      this.$router.push("/user/orderpre");
    },
    
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },

    onClickLeft:function(){
      this.$router.go(-1);
    },

    changeNum(id,Num,Name){
      if(id==null||id==""||Num==null||Num==""){
        return;
      }
      this.$axios
      .put("/order/cartupdate",
        { "cartId": id,"cartGoodsNum": Num}
      )
      .then((res) => {
        if (res.data.code == 200) {
          Notify({ type: 'success', message: Name+' 的数量成功修改为'+Num});
          //console.log(this.images);
        }
      })
      .catch(error => {
        console.log("请求修改失败了")
      });
    },

    deleteGood(cartId,GoodsName,index){
      //alert("触发");
      Dialog.confirm({
        title: '警告',
        message: '确实要删除'+GoodsName+'吗?'
      }).then(() => {
        this.$axios
        .delete("/order/delcart/"+cartId,)
        .then((res) => {
          if (res.data.code == 200) {
            Notify({ type: 'warning', message: GoodsName+'删除成功'});
            this.goods.splice(index, 1);
            //console.log(this.images);
          }
        })
        .catch(error => {
          console.log("请求删除失败了")
        });
      })
      this.$axios
      .get("/order/cartnum")
      .then((res) => {
        if(res.data.code == 200) {
          localStorage.setItem("cartNum",res.data.info);
        }
      })
      .catch(error => {
        console.log("请求购物车长度数据失败了")
      });
    }

  },
}
</script>

<style lang="less">
.cart{
  margin-bottom: 50px;
}
.card-goods {
  padding: 10px 0;
  background-color: #fff;

  &__item {
    position: relative;
    background-color: #fafafa;

    .van-checkbox__label {
      width: 100%;
      height: auto; // temp
      padding: 0 10px 0 15px;
      box-sizing: border-box;
    }

    .van-checkbox__icon {
      top: 50%;
      left: 10px;
      z-index: 1;
      position: absolute;
      margin-top: -10px;
    }

    .van-card__price {
      color: #f44;
    }
  }
}
.submitbar{
  margin-bottom: 50px;
}
.footer{
  z-cindex: 15;
}
</style>
